<!--
 * new page
 * @author: YK
 * @since: 2023-12-14
 * index.vue
-->
<template>
  <div>
    <el-menu class="el-menu-vertical-demo" :default-active="defaultActive" :router="router" :="$attrs">
      <template v-for="(item, i) in data">
        <el-menu-item
          v-if="!item[children] || !item[children].length"
          :index="item[index]"
          :key="i"
        >
          <component
            v-if="item[icon]"
            :is="`el-icon${toLine(item[icon])}`"
          ></component>
          <span>{{ item[name] }}</span>
        </el-menu-item>
        <el-sub-menu
          v-if="item[children] && item[children].length"
          :index="item[index]"
          :key="i"
        >
          <template #title>
            <component
              v-if="item[icon]"
              :is="`el-icon${toLine(item[icon])}`"
            ></component>
            <span>{{ item[name] }}</span>
          </template>
          <el-menu-item
            v-for="(item1, indey) in item[children]"
            :key="indey"
            :index="item1[index]"
          >
            <component
              v-if="item1[icon]"
              :is="`el-icon${toLine(item1[icon])}`"
            ></component>
            <span>{{ item1[name] }}</span>
          </el-menu-item>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
// import { MenuItem } from "./types";
import { toLine } from "../../../utils";
withDefaults(
  defineProps<{
    data: any[];
    defaultActive: string; //默认选中的菜单
    router: boolean; //是否使用路由模式
    name: string; //菜单名称的键名
    icon: string; //菜单图标的键名
    index: string; //菜单的标识索引的键名
    children: string; //子菜单的键名
  }>(),
  {
    data: () => [],
    defaultActive: "",
    router: false,
    name: "name",
    icon: "icon",
    index: "index",
    children: "children",
  }
);
</script>

<style scoped lang="scss">
svg {
  margin-right: 4px;
  width: 1em;
  height: 1em;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  // min-height: 400px;
}
</style>
